
$spaceForButtons = 46px;

$splitPreviewMinWidth = 1000px;
$spacyButtonsMinWidthWithSplit = 1150px;
// It'd be nice to change this to 1100? when the editor is placed to the left — then it's
// much more narrow. But let's wait, complicated enough already. And if the page isn't
// somewhat wide, the Place-Left button isn't shown anyway right now.
// $eitherTextareaOrPreviewMaxWidth = 1100px; // ?

// Here, either the <textarea> or the preview is shown (but not both),
// since width < $splitPreviewMinWidth.
$autoMaximizeEditorMaxWidth = 600px;
$spacyButtonsMinWidth = 450px;
$spacyYMinHeight = 400px;

previewFullWidth()
  width: 100%;
  // Space for the [Submit][Cancel] etc buttons, and the [Edit] button (to hide the preview).
  bottom: $spaceForButtons;

// Without this, height = auto, and won't be full size, in Firefox (but fine in Chrome, weird).
.DW.DW .rta__textarea
  height: 100%;
  // Default is 1em, that's too large.
  font-size: 14px;

.dw-embedded-editor
  #debiki-editor-controller
    height: 100% !important

.esEdtr_backdrop
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: black; // but js sets opacity.
  pointer-events: none;

.esEdtr_titleEtc
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-bottom: 4px;
  @media (min-height: $spacyYMinHeight)
    margin-bottom: 7px;
  .form-group
    margin-bottom: 0;

  @media (max-width: 700px)
    // Pretty narrow. Don't list all stuff side by side, instead, one per row.
    flex-direction: column;

.esEdtr_titleEtc_title
  flex: 1;

.esEdtr_titleEtc_title,
.esEdtr_textarea
  &.esError
    outline: 6px solid hsl(0, 100%, 65%);
    outline-offset: 0; // else 2px in Chrome at least, if :focus. Why?
    box-shadow: none !important; // both outline & shadow = ugly
    border-radius: 0; // both rectangular outline & border radius = ugly

.esEdtr_txtBtns
  background: white;
  margin-bottom: 1px;

.esEdtr_txtBtn
  border: none;
  background: white;
  padding: 4px 8px;
  color: hsl(0, 0%, 50%);
  font-size: 15px;
  &:hover
    background: hsl($uiHue, 100%, 94%);
    color: hsl(0, 0%, 12%);

.esEdtr_txtBtn-em
  font-family: monospace;
  font-size: 90%;

.esEdtr_txtBtn.n_FmtHlp
  box-shadow: 1px 1px 2px hsl(0 0% 50%);
  padding: 3px 6px 1px 7px;
  font-size: 13.5px;
  line-height: 1;
  position: relative;
  top: 0px;
  margin-left: 1ex;
  border: 1px solid #ddd;
  color: hsl(0deg 0% 22%);

.esEdtr_close
  position: absolute;
  right: 0;
  padding: 1px 13px;
  font-size: 24px;
  color: hsl(0, 0%, 27%);
  z-index: 2;
  &:hover
    color: hsl(0, 0%, 8%);
    background-color: hsl(0,0%,80%);
    cursor: pointer;


.s_E_SimlTpcs
  box-shadow: 10px 9px 10px rgba(0,0,0,0.57) !important;
  bottom: calc(100% + 5px) !important;  // or the shadow gets bit too close to the title
  max-height: 170px;  // sync with js [SIMLTPCH]
  overflow-y: scroll;
  overflow-x: hidden;
  h4
    margin: 0 0 9px;
    float: left;
  ul
   clear: both;

.s_E_SimlTpcs_L_It
  line-height: 131%;
  font-size: 15.3px;
  margin-left: 26px;


.s_E_SimlTpcs_SearchB,
.s_E_SimlTpcs_HideB
  padding: 10px 0 2px 13px !important;
  position: relative;
  top: -12px;

.s_E_SimlTpcs_SearchB
  padding-right: 13px !important;


.s_E_DoingWhat
  .esP_By
    margin: 0 2px 0 3px;
  .esP_By_F,
  .esP_By_U
    font-weight: bold;
    color: hsl($uiHue, 100%, 35%);

$scrollPreviewButtonPaddingTop = 6px;

#debiki-editor-controller.s_E-NoInEdPrvw
  // No in-editor preview — then, there's a Show-preview button instead that
  // scrolls to an in-page preview. Align the doing-what (e.g. "Reply to:") text
  // with that button.
  .s_E_DoingWhat,
  .icon-info-circled
    padding-top: $scrollPreviewButtonPaddingTop;
  .s_DfSts
    // Skip flex-position, it'd get placed "far away" to the right, hard to see,
    // now when the textarea is so wide (100%, no preview to the right).
    margin-left: 30px;
    padding-top: $scrollPreviewButtonPaddingTop;

  // Also, there's more blank space above, because of the large "Show preview" button,
  // so can reduce 'top' from 12px (EDABSTOP) to this:
  // And, sice no preview, set width 100% (instead of 50%).
  .editor-area
    top: 8px;
    width: 100%;
  // And add a bit more padding, looks less claustrophobic.
  #editor-after-borders
    left: 21px;
    right: 21px;


// The  [Auto|show preview]  double button.
// ------------------------
// Maybe break out [double_btn] Typescript & CSS?

.c_E_ScrPrvw
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 47%);
  margin: 0 0 5px 28px;
  background: white;
  white-space: nowrap;
  &.auto
    position: relative;
    top: 2px;
    left: 2px;
    margin-top: -3px;    // cancel padding-top so layout-wise in same position
    margin-right: -2px;
    padding-top: 2px;
    padding-left: 2px;
    box-shadow: 1px 1px 4px hsl(0 0% 50%) inset;
    background: hsl(0 0% 98%);
    &:hover
      // Highlight the whole button (both the left & right part).
      background-color: #ebebeb;

.c_E_ScrAutoB,
.s_E_ScrPrvwB
  display: inline-block;
  padding: $scrollPreviewButtonPaddingTop 11px;
  cursor: pointer;
  background: inherit;
  &, &:hover
    color: #222;
    text-decoration: none;

// The  [Auto|  half of the button.
.c_E_ScrAutoB
  padding-right: 3px;  // places _closer_to_other_half
  border-right: 1px solid hsl(0 0% 95%) !important;

// The  |scroll to preview]  half of the button.
.c_E_ScrAutoB + .s_E_ScrPrvwB
  // Lowercase 's':  [Auto|scroll to preview]  not:  [Auto|Scroll to preview].
  text-transform: lowercase;
  padding-left:  4px;  // places _closer_to_other_half


// Tighter whitespace
// ------------------------

tighterEditorTopButtons()
  .c_E_ScrPrvw,
  #debiki-editor-controller.s_E-NoInEdPrvw .s_DfSts
    margin-left: 10px;
  .c_E_ScrAutoB
    padding-left:  6px;
  .s_E_ScrPrvwB
    padding-right: 6px;

// If editor placed to the left, and screen a bit narrow.
@media (max-width: 1350px)
  html.c_Html-EdLeft
    tighterEditorTopButtons()

    // Change button title from:  [Auto|scroll to preview]  to just:  [Auto|preview].
    // It's a power user feature anyway, to place the editor to the left.
    // (Really small screens? Then, [auto_full_screen_editor], and the scroll-to-preview
    // button gets removed.)
    .c_E_ScrAutoB + .s_E_ScrPrvwB .s_E_ScrPrvwB_Scr2
      display: none;

// If screen narrow.
@media (max-width: 650px)
  tighterEditorTopButtons()

// ------------------------


#debiki-editor-controller
  position: fixed !important; // !important so jQuery.resizable() won't overwrite — what? but jQuery.resizable() is gone now (year 2020) since long.
  top: initial;
  bottom: 0
  width: 100%
  height: 300px;
  background: hsl(0, 0%, 89%)
  z-index: 1030

  &.editor-box-shadow
    box-shadow: 0 0 23px 6px rgba(0,0,0,0.6);
    border-top: 1px solid hsl(0, 0%, 94%);

  &.c_E-PlaceLeft
    top: 0;
    height: 100%;
    border-top: none;
    box-shadow: 0 0 14px 2px rgb(0 0 0 / 73%);
    padding-top: 9px;
    left: 0;
    width: calc(100% * 0.45);  // [ed_left_width]
    //max-width: 850px;  — wait, complicated to sync w page content width [ed_left_max_width]

    // The watchbar would be to the left, if it was open — so there's an open-watchbar
    // button to the left, if it's closed. (But no open-watchbar in the topbar,
    // which is to the right of the eitor. That is: 1) watchbar (to the very left),
    // 2) editor with open-watchbar button, 3) topbar and page contents, 4) the right sidebar.)
    .esOpenWatchbarBtn
      float: none;
      margin: 0 12px 2px -21px;
      padding: 6px 10px 6px 3px;

    // No need for any thick gray border-looking area to the right — not close to
    // the screen edge any more; instead, there's the page content to the right.
    // (And then a thick border instead looks distracting.)  [.no_border_right]
    #editor-after-borders
      right: 0;
    .editor-area-after-borders
      right: 4px !important;

    // There's almost no border to the right (see [.no_border_right] just above),
    // instead, we're using this scrollbar — and let's show it also when it's not needed,
    // so it works as a border (looks ok nice, better than the [.no_border_right]).
    textarea.rta__textarea.editor
      overflow-y: scroll;

    // Nice with a bit _space_between the  Submit/Cancel/Maximize and the Preview buttons.
    .esEdtr_cycleMaxHzBtn
      margin-right: 2em !important;

// On forum topic list pages, there's no in-page preview — instead, the preview
// is inside the editor. Then, the editor needs more space, say, 60% instead of 45%:
html.es-forum #debiki-editor-controller.c_E-PlaceLeft,
// If split pane textarea & preview on a discussion page, then, need the same extra width.
#debiki-editor-controller.c_E-PlaceLeft.s_E-SplitOr
  width: calc(100% * 0.60);  // [ed_left_width]


html.es-watchbar-open #debiki-editor-controller
  &.c_E-PlaceLeft
    // The watchbar is 230 px wide. We'll split the remaining 45% + 55% between the
    // editor (to the left) and page contents (to the right).
    left: $watchbarWidth; // 230px;
    // Seems `$watchbarWidth` won't get replaced inside calc!?
    width: calc((100% - 230px) * 0.45);  // [ed_left_width]
    .esOpenWatchbarBtn
      // Not needed; watchbar already open.
      display: none;

// The editor can be a bit narrow, when placed to the left. So set the
// _editor_submit_preview_buttons_width to auto, so gets as wide as needed.
// Nothing to the right of the buttons (no preview).
#debiki-editor-controller.c_E-PlaceLeft .submit-cancel-btns
  width: auto;

// Extra wide, on topic list pages — but subtract the watchbar width.
html.es-watchbar-open.es-forum #debiki-editor-controller,  // or rm? [ed_prv_orig_splits]
html.es-watchbar-open #debiki-editor-controller.s_E-SplitOr
  &.c_E-PlaceLeft
    // Try using $watchbarWidth instead of 230, hmm.
    width: calc((100% - 230px) * 0.60);  // [ed_left_width]


#debiki-editor-controller
  &.s_E-Max
    // --- dupl [5KETW02]
    height: 100% !important;
    #editor-after-borders
      top: -1px !important;
      left: 5px !important;
      right: 5px !important;
    &.editor-box-shadow
      border: none !important;
    // --- /dupl

  // Editor maximized and split horizontally (textarea above, preview below).
  @media (min-width: $autoMaximizeEditorMaxWidth + 1)
    &.s_E-SplitHz
      .editor-area
        width: 100%;
        bottom: calc(65% + 10px);
      .preview-area
        width: 100%;
        position: absolute
        top: 35%;
        bottom: $spaceForButtons + 3px;

  // If the screen is narrow, we'll make the editor full screen, and reduce margins & paddings,
  // and disable some stuff that won't work on small screens (e.g. we'll remove
  // the split pane preview buttons `.esEdtr_cycleMaxHzBtn`).
  //
  @media (max-width: $autoMaximizeEditorMaxWidth)  // [auto_full_screen_editor]
    top: 0;

    // --- dupl [5KETW02]
    height: 100% !important;
    #editor-after-borders
      top: -1px !important;
      left: 5px !important;
      right: 5px !important;
    &.editor-box-shadow
      border: none !important;
    // --- /dupl

  // If screen wide enough, we show the cycle-PlaceLeft/Max/Horiz button. But
  // not the Maximize button:  (both Place-left and Maximize buttons is a bit much)
  .c_E_MaxB
    display: none;

  @media (max-width: $autoMaximizeEditorMaxWidth)
    // When auto maximizing, hide the Maximize button.
    .c_E_MaxB
      display: none !important;

  @media (max-width: $splitPreviewMinWidth - 1)
    // Hide the Place Left button, since the window is [too_narrow_for_Place_left]. But if
    // already placed-left, show it, so can [click to Max then click back to normal].
    &:not(.c_E-PlaceLeft):not(.s_E-Max)
      .esEdtr_cycleMaxHzBtn
        display: none;
      // But a Maximize button makes sense also when the window is a bit narrow.
      // (It skips Place-left, jumps directly to full screen editor.)
      .c_E_MaxB
        display: inline-block;

    &.s_E-Min
      top: initial;
      height: 47px !important;

      .editor-area,
      .preview-area,
      button
        display: none !important;

      .submit-cancel-btns
        bottom: 6px !important;  // instead of only 3px (8KAQF24)

      #esMinimizeBtn
        display: block !important;
        font-weight: bold;
        border: none;
        padding-left: 10px; // instead of 6px
        padding-right: 10px;

  .btn-default
    border-color: hsl(0, 0%, 70%); // not 80% because background not white but light gray

  .s_E_SimlTpcs,
  .dw-editor-guidelines-wrap
    position: absolute;
    bottom: 100%;

  .s_E_SimlTpcs,
  .dw-editor-guidelines
    background-color: hsl($yellowTipsHue, 70%, 93%);
    border: 1px solid hsl($yellowTipsHue, 70%, 85%);
    box-shadow: 6px 7px 9px rgba(80, 80, 80, 0.63);
    left: 13px;
    padding: 18px 18px 8px;
    min-width: 300px;
    max-width: 550px;
    @media (max-width: 500px)
      max-width: 400px;
    @media (max-width: 400px)
      max-width: 300px;

    .dw-hide
      padding: 0 15px 8px;
      color: hsl($uiHue, 70%, 45%);
      float: right;

  .dw-editor-guidelines
    position: relative;  // or can move  left 13px to the -wrap instead?

  #editor-after-borders
    position: absolute;
    top: 3px;
    right: 15px;
    bottom: 0;
    left: 15px;

  .editor-area  // (EDABSTOP)
    width: 50%
    position: absolute
    top: 12px;
    bottom: $spaceForButtons - 4;
    @media (min-height: $spacyYMinHeight)
      bottom: $spaceForButtons;

    .editor-area-after-borders
      position: absolute;
      top: 0;
      right: 10px;
      bottom: 0;
      left: 0;
      display: flex;
      flex-direction: column;

    .s_E_DoingRow
      position: relative; // why? can remove?
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      padding-right: 32px; // some space for the [x] close editor button
      @media (min-height: $spacyYMinHeight)
        margin-bottom: 4px;

    .icon-info-circled
      color: white;
      text-shadow: 0 0 3px black;
      font-size: 20px;
      position: relative;
      // top: -5px; — why?
      padding-left: 5px;
      &:hover
        text-decoration: none;
        outline: 1px solid hsl($uiHue, 50%, 70%);
        background-color: hsl($uiHue, 50%, 85%);

    .title-input
      width: 100%;
      padding: 6px;
      font-size: 14px;

    .rta // react-textarea-autocomplete
      width: 100%
      flex: 1; // it'll fill all available y-space
      .editor
        // height 100% doesn't work but this does: (.rta is already position = relative)
        position: absolute;
        top: 0;
        bottom: 0;
        font-size: $postFontSize;
        padding: 6px;
        border: none;
        &:focus
          box-shadow: 0 1px 3px 2px hsl($uiHue, 100%, 79%);

#debiki-editor-controller:not(.s_E-Max)
  .editor-area
    @media (max-width: $splitPreviewMinWidth - 1)
      // Window too narrow to show both <textarea> and editor. We'll use
      // the full width, and show either or.
      width: 100%;
      .editor-area-after-borders
        right: 0;

  &.s_E-SplitOrPrv
    // SplitOrPrv means that if the screen is too narrow, we'll _show_only_the preview.
    // So, hide the editor <textarea>.
    @media (max-width: $splitPreviewMinWidth - 1)
      .editor-area
        display: none;

#debiki-editor-controller
  .preview-area

    width: 50%
    position: absolute
    top: 12px
    right: 0
    bottom: 5px
    z-index: 1; // so above the div with Submit & Cancel buttons

    .dw-preview-help
      position: absolute;
      z-index: 5;
      top: 55px;
      left: 25px;
      box-shadow: 5px 5px 6px hsla(0, 0%, 0%, 0.6);

    .preview
      position: absolute;
      top: 26px;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 0 2px 0 3px;
      background: white
      overflow: auto

  &:not(.s_E-Max) .preview-area
    @media (max-width: $splitPreviewMinWidth - 1)
      // If screen to narrow to show <textarea> and preview side by side, then, if
      // showing the preview (but not the <textarea>), then it should be full width.
      previewFullWidth()

  &.s_E-SplitOrE:not(.s_E-Max)
    // SplitOrE means that if the screen is too narrow, we'll _show_only_the editor.
    // So, hide the preview.
    @media (max-width: $splitPreviewMinWidth - 1)
      .preview-area
        display: none;

  &.s_E-OnlyPrv
    .preview-area
      previewFullWidth()

  // If the textarea is placed left, in split-textarea-preview mode, the editor might be
  // a bit narrow, so the bottom of the preview pane would overlap the rightmost part of
  // the Submit/Cancel/Hide-Preview buttons <div>. Therefore, make the preview a bit shorter.
  &.c_E-PlaceLeft .preview-area
    bottom: $spaceForButtons; // instead of 0

  .submit-cancel-btns
    // This'll place the Preview button just to the left of the middle of the editor,
    // so when clicking, and the preview opens to the right (and the textarea will be to
    // the left), the button can stay in the same place (because the preview opens on the
    // 50% space to the right of the button), so we won't need to move the finger or mouse
    // to click the button again to hide the preview.
    // [_editor_submit_preview_buttons_width]
    width: calc(50% - 10px);
    //@media (max-width: $eitherTextareaOrPreviewMaxWidth)
    //  html.c_Html-EdLeft .preview-area
    //    theStuffBelow()  (1 line width: ...)
    @media (max-width: $splitPreviewMinWidth - 1)
      width: 100%;

    position: absolute;
    bottom: 3px;  // (8KAQF24)
    @media (min-height: $spacyYMinHeight)
      bottom: 6px;
    button
      margin: 0;
      @media (min-width: $spacyButtonsMinWidth)
        margin-right: 5px;
    .esEdtr_cycleMaxHzBtn
      min-width: 65px;
    .c_E_HidPrvB,
    .c_E_BotOrEB,
    .c_E_BotOrPrvB,
    .c_E_HidEB,
    #esMinimizeBtn
      min-width: 60px;
      float: right;
      margin: 0;
      @media (min-width: $spacyButtonsMinWidth)
        margin-left: 5px;
    //@media (max-width: $eitherTextareaOrPreviewMaxWidth)
    //  html.c_Html-EdLeft .preview-area
    //    theStuffBelow()
    @media (min-width: $splitPreviewMinWidth)
      #esMinimizeBtn
        display: none;

  .view-edit-history
    margin-left: 1em;
    vertical-align: middle;


// ----- Hide/show Show Prevew buttons  [toggle_preview_btns]

.c_E_HidPrvB,
.c_E_HidEB,
.c_E_BotOrEB
.c_E_BotOrPrvB
  display: none;

// If screen to small to show <textarea> and preview side by side, we are showing
// just one, depending on which preview related buttons the user has clicked.
//
// This unhides a button to show the other thing (preview or <textarea>) instead:
//
@media (max-width: $splitPreviewMinWidth - 1)
  .s_E-OnlyE,
  .s_E-SplitOrE
    .c_E_BotOrPrvB
      display: block;

  .s_E-OnlyPrv,
  .s_E-SplitOrPrv
    .c_E_BotOrEB
      display: block;

// If screen wide enough, we might be showing the <textarea> and preview side by side.
//
@media (min-width: $splitPreviewMinWidth)
  // If we're showing *only* the <textarea> or preview, unhide a button that shows
  // both side by side:
  .s_E-OnlyE,
  .s_E-OnlyPrv
    .c_E_BotOrEB
      display: block;

  // If we're showing both the <textarea> and preview, unhide two button that hides
  // the <textarea> or preview, respectively:
  .s_E-SplitOrE,
  .s_E-SplitOrPrv
    .c_E_HidPrvB,
    .c_E_HidEB
      display: Block;

// ----- Maximized editor

// The scroll-to-in-page-preview button makes no sense, when the editor fills the whole window,
// since the page cannot be seen anyway (only the editor). The editor fills the whole window,
// if 1) it's maximized (also for embedded comments — the editor iframe gets maximized),
// or if 2) the window is narrow, then the editor gets auto maximized,
// unless in embedded comments.

// But: `selectors, @media ..., more-selectors` doesn't seem to work. So, let's use this
// fn instead.
hideScrollButtons()
  .c_E_ScrPrvw
    display: none;
  // The replying to @username shouldn't be clickable either. Normally, clicking it,
  // scrolls to the post that person wrote and that you're replying to, but now the
  // editor fills the whole window.
  // And likewise, the "Preview" title shouldn't scroll to the preview.
  .s_E_DoingWhat a,
  .c_E_PrvwTtl
    pointer-events: none;
  .s_E_DoingWhat a .esP_By_U
  .c_E_PrvwTtl
    color: hsl(0 0% 25%) !important;

.s_E-Max  // case 1 above
  hideScrollButtons()

@media (max-width: $autoMaximizeEditorMaxWidth)  // case 2
  html:not(.dw-embedded-editor)
    hideScrollButtons()

// -----

.s_DfSts
  margin: 0 auto;  // places it in the middle, if flex layout
  color: hsl(0, 0%, 38%);

.s_DfSts-Err
  padding: 2px 9px;
  font-weight: bold;
  color: $errorColor;
  background: $errorBackground;


.s_UplErrD_UplNm
    color: $errorColor;
    background: $errorBackground;

.c_2Short-Cmt
  .n_MoreMargin
    margin: 0 0.85ex;  // or sample list becomes hard to read
  .icon-heart
    color: hsl(0 0% 33%);  // or too dark


// React-textarea-autocomplete problems / bugs:   [rta_overfl_top_bgfx]
// boundariesElement doesn't seem to work,
// so instead, if rta tries to place itself at the win/something top, then:
.rta__autocomplete--top
  position: relative !important;
  // There's some controls and widgets above, so top can be a bit < 0:
  top: -50px !important;
// And RTA can place itself at left: -900 so everything is off-screen,
// if there's some rather wide elem, or not sure what it does:
// Apparently it tries to place at right win edge, and if won't work,
// it just left aligns althoguh everything then off-screen.
// Maybe don't use rta — because these problems solved already in Ty's
// dropdown-modal. Just add a markdown-it plugin that pops up a
// username selector if typing '@...'  ?  Maybe no need for any extra
// component like rta.
.rta__autocomplete
  max-width: 360px;

.rta__entity
  font-size: 14px;
  padding: 5px 0 5px 5px !important;
html.mouse .rta__entity
  padding: 3px 0 3px 5px !important;


// Hack. Make disabled items (e.g. usernames one cannot mention) unclickable, and gray.
.rta__entity .c_Disabled
  background: #fff;
  color: #777;
  margin: -3px 0 -3px -6px;
  padding: 5px 0 5px 6px;
  //pointer-events: none; — using event.stopPropagation() instead. [mention_disabled]


// Compact buttons if narrow screen, so won't wrap to 2nd line.
compactButtons()
  #debiki-editor-controller .submit-cancel-btns button
    margin: 0 1px 0 0;
    padding-left: 6px;  // instead of 12px
    padding-right: 5px;

  // Give a shared class? Or _wrap_preview_btns_in_div?
  #esMinimizeBtn,
  .c_E_HidPrvB,
  .c_E_BotOrEB,
  .c_E_BotOrPrvB,
  .c_E_HidEB
    margin: 0 0 0 1px !important;
    // They're all float:right.  Looks nice with some more _space_between the left
    // buttons (Submit, Cancel) and the right (Preview, Minimize etc) buttons.
    position: relative;
    right: -2px;

@media (max-width: $spacyButtonsMinWidth - 1)
  compactButtons()

// If the screen is just wide enough to show a split-<textarea>-preview, there's not
// much space for the buttons.
@media (min-width: $splitPreviewMinWidth) and (max-width: $spacyButtonsMinWidthWithSplit)
  compactButtons()

.c_AliasB
  margin-left: 1ex;

.esE_SaveB_Verbose
  display: none;
  @media (min-width: $spacyButtonsMinWidth)
    display: inline;

// iPhone is problematic, needs these special fixes. Edit, year 2025: Now it works better,
// just one fix left, is it still needed?
html.s_iphone
  // Prevent iPhone from zooming in on input fields — which it does if the font size is <= 16 px.
  // Based on:
  //   https://stackoverflow.com/questions/2989263/
  //      disable-auto-zoom-in-input-text-tag-safari-on-iphone#comment25424617_6394497
  input[type="text"],
  input[type="password"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="date"],
  input[type="month"],
  input[type="time"],
  input[type="week"],
  input[type="number"],
  input[type="email"],
  input[type="url"],
  input[type="search"],
  input[type="tel"],
  input[type="color"],
  select:focus,
  textarea
    font-size: 16px !important;

// vim: fdm=marker et ts=2 sw=2 tw=0 fo=r list
